<template>
    <el-menu :router="true"  :default-active="defaultActive">
        <el-submenu v-for="menuTree in adminTree" :index="menuTree.id+''" :key="menuTree.id">
            <template slot="title">
                <i :class="menuTree.icon"></i>
                <span>{{menuTree.menuName}}</span>
            </template>
            <template v-for="children in menuTree.children" >
                <el-menu-item :index="children.url">
                    {{children.menuName}}
                </el-menu-item>
            </template>
        </el-submenu>
    </el-menu>
</template>

<script>

    export default {
        name: "AsideMenu",
        computed:{
            //获取菜单树
            adminTree(){
                return this.$store.state.system.menuTree;
            },
            //获取当前激活的菜单
            defaultActive(){
                return this.$route.path
            }
        },
        mounted(){
            //页面加载完成，在store中加载菜单树信息
            this.$store.dispatch('loadAdminMenu')
        },
        methods:{
        }
    }
</script>

<style lang="scss">
.el-aside {
    background-color: #FFFFFF;
    text-align: left;
}
</style>